<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>

  <meta charset="UTF-8">

  <title>MES-巡视台</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
    <link rel="stylesheet" href="css/zhuan.css" media="screen" type="text/css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.10/pako.js"></script>
</head>

<style>


</style>


<body background="/img/aa.png">
<header>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#"><b>巡视台</b></a></li>
    <li><a href="/mainControl">控制台</a></li>
    <li style="margin-left: 80%"><a class="btn btn-default"href="/out"><b>退出</b></a></li>
  </ul>

</header>

<span hidden th:text="${path}"></span>
<!-- 总开关-->
  <section style="background:url(img/ae.jpg);width: 100%;height: 150px;" >
    <div class="navbar-header" style="width: 200px;" >
      <h1  class="navbar-brand" style="color: #449ba2;margin-top: 50px;margin-left: 50px;">开始与停止</h1>
    </div>
      <div class="sticker-center"  id = 'total' >
        <div class="cassete-center" style="background-color: green">
          <div class="circle">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
          <div class="circle">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
      </div><!-- /.sticker-center-->

  </section>


<section  style=" padding:10px 50px;background:url(img/ae.jpg);width: 100%;height: 210px;" >
  <form role="form" style="height: 100%;width: 50%;float: left">
    <div  style="height:30px;margin-top: 20px;" class="form-group has-success" >
      <label class="col-sm-5 control-label" for="inputSuccess">
        仓库空位数
      </label>
      <div class="col-sm-7">
        <input type="text"  readonly class="form-control" id="inputSuccess">
      </div>
    </div>
  <div  style="height:30px;margin-top: 10px;" class="form-group has-success" >
    <label class="col-sm-5 control-label" for="inputSuccess">
      仓库空框数
    </label>
    <div class="col-sm-7">
      <input type="text"  readonly class="form-control" id="inputSuccess1">
    </div>
  </div>

    <div class="form-group has-success" style="margin-top: 10px; height:30px;">
      <label class="col-sm-5 control-label" for="inputWarning">
        仓库满框数
      </label>
      <div class="col-sm-7">
        <input type="text" readonly class="form-control" id="inputWarning">
      </div>
    </div>
  <div class="form-group has-warning" style="margin-top: 10px;height:30px;">
    <label class="col-sm-5 readonly control-label" for="inputWarning">
      禁用
    </label>
    <div class="col-sm-7">
      <input type="text" readonly class="form-control" id="inputWarning1">
    </div>
  </div>

  </form>
  <form role="form" style=" height: 100%;width: 50%;float: left">
    <div class="form-group has-error" style="margin-top: 20px;height:30px;">
      <label class="col-sm-5 control-label" for="inputError">
        仓库原材料数
      </label>
      <div class="col-sm-7">
        <input type="text" readonly class="form-control" id="inputError">
      </div>
    </div>
    <div class="form-group has-error" style="margin-top: 10px;height:30px;">
      <label class="col-sm-5 control-label" for="inputError">
        仓库方形成品数
      </label>
      <div class="col-sm-7">
        <input type="text" readonly class="form-control" id="inputError1">
      </div>
    </div>

    <div class="form-group has-error" style="margin-top: 10px;height:30px;">
      <label class="col-sm-5 control-label" for="inputError">
        仓库圆形成品数
      </label>
      <div class="col-sm-7">
        <input type="text" readonly class="form-control" id="inputError2">
      </div>
    </div>

  </form>
</section>

<!--第一工作站 -->
<section style="background:url(img/c.jpg);width: 100%;height: 150px;" >
    <div class="navbar-header"  style="width: 200px;" >
      <h1 class="navbar-brand" style="color: #449ba2;margin-top: 50px;margin-left: 50px;">第一工作站</h1>
    </div>
      <div class="sticker-center" id = 'first'>
        <div class="cassete-center" style="background-color:orange">
          <div class="circle" style="color: #449ba2">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
          <div class="circle">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
      </div><!-- /.sticker-center-->

  </section>
<section style="background:url(img/c.jpg);width: 100%;height: 150px;" >
    <div class="navbar-header"  style="width: 200px;" >
      <h1 class="navbar-brand" style="color: #449ba2;margin-top: 50px;margin-left: 50px;">第二工作站</h1>
    </div>

      <div class="sticker-center" id = 'second'>
        <div class="cassete-center" style="background-color: yellow">
          <div class="circle" style="color: #449ba2">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
          <div class="circle">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
      </div><!-- /.sticker-center-->

  </section>
<section style="background:url(img/c.jpg);width: 100%;height: 150px;" >
    <div class="navbar-header"  style="width: 200px;" >
      <h1 class="navbar-brand" style="color: #449ba2;margin-top: 50px;margin-left: 50px;">第三工作站</h1>
    </div>
      <div class="sticker-center" id = 'three'>
        <div class="cassete-center" style="background-color: blueviolet">
          <div class="circle" style="color: #449ba2">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
          <div class="circle">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
      </div><!-- /.sticker-center-->

  </section>
<section style="background:url(img/c.jpg);width: 100%;height: 150px;" >
    <div class="navbar-header"  style="width: 200px;" >
      <h1 class="navbar-brand" style="color: #449ba2;margin-top: 50px;margin-left: 50px;">第四工作站</h1>
    </div>

      <div class="sticker-center" id = 'four'>
        <div class="cassete-center" style="background-color: cornflowerblue">
          <div class="circle" style="color: #449ba2">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
          <div class="circle">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
      </div><!-- /.sticker-center-->

  </section>
</body>
<script th:inline="javascript">
  //共有变量
  var model ;
  var socket;
  var open = false;

  init();
  //点击事件
  function end(f){
    $("#"+f+" .cassete-center div").attr("class","circle1");
  }

  function start(f){
    $("#"+f+" .cassete-center div").attr("class","circle");
  }




  /**
   * 第一次进入页面初始化数据
   */
   function init() {
    var path = [[${path}]];
    console.log(path);
    openSocket(path); //开启soekct连接
    Ajax("/getModel","{}"); //获取初始化数据
    if(model){
      actF(model);
    }

  }
  function actF(model) {
     // console.log(model['0+1']);
     console.log(model);
    if(model['0+1'] == 1){
      end("total");
    }else if(model['0+1']==0 ){
      start('total');
    }

    if(model['9+A'] == 'A'){
      end('first');
    }else if(model['9+A'] == '9') {
      start('first');
    }

    if(model['B+C'] == 'C'){
      end('second');
    }else if(model['B+C'] == 'B') {
      start('second');
    }

    if(model['D+E'] == 'E'){
      end('three');
    }else if(model['D+E'] == 'D') {
      start('three');
    }

    if(model['F+10'] == '10'){
      end('four');
    }else if (model['F+10'] == 'F') {
      start('four');
    }
    if(model['2']){
      $("#inputSuccess").val(model['2']);
    }
    if(model['3']){
      $("#inputSuccess1").val(model['3']);
    }
    if(model['4']){
      $("#inputWarning").val(model['4']);
    }
    if(model['5']){
      $("#inputWarning1").val(model['5']);
    }
    if(model['6']){
      $("#inputError").val(model['6']);
    }
    if(model['7']){
      $("#inputError1").val(model['7']);
    }
    if(model['8']){
      $("#inputError2").val(model['8']);
    }
  }

  // function sendMessage() {
  //   if (typeof (WebSocket) == "undefined") {
  //     console.log("您的浏览器不支持WebSocket");
  //   } else {
  //     console.log("您的浏览器支持WebSocket");
  //     console.log('{"toUserId":"' + $("#toUserId").val() + '","contentText":"' + $("#contentText").val() + '"}');
  //     socket.send('{"toUserId":"' + $("#toUserId").val() + '","contentText":"' + $("#contentText").val() + '"}');
  //   }
  // }

  function openSocket(path) {
    if (typeof (WebSocket) == "undefined") {
      console.log("您的浏览器不支持WebSocket");
    } else {
      console.log("您的浏览器支持WebSocket");
      //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
      //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
      //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
      // var ctxPath=[[${#httpServletRequest.getContextPath()}]];
      // console.log(ctxPath);
      var socketUrl = path+"/imserver/" + new Date().getTime();
      // var socketUrl = ctxPath+"/imserver/" + new Date().getTime();
      socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
      console.log(socketUrl);
      if (socket != null) {
        socket.close();
        socket = null;
      }
      socket = new WebSocket(socketUrl);
      //打开事件
      socket.onopen = function () {
        console.log("websocket已打开");
        //socket.send("这是来自客户端的消息" + location.href + new Date());
      };
      //获得消息事件
      socket.onmessage = function (MessageEvent) {
        console.log(MessageEvent);
        // //TODO 发现消息进入    开始处理前端触发逻辑
        console.log("监听已开启。。。。");
        if(open){
          if(MessageEvent.data){
            console.log(MessageEvent.data);
            var str = MessageEvent.data;
            var strObj = str.trim().split("|");
            var mol = {};
            mol[strObj[0]] = strObj[1];
            console.log(mol);
            actF(mol);
          }
        }
        open = true;
      };
      //关闭事件
      socket.onclose = function () {
        console.log("websocket已关闭");
      };
      //发生了错误事件
      socket.onerror = function () {
        console.log("websocket发生了错误");
      }
    }
  }


  /**
   * 公共的 ajax 请求
   */
  function Ajax(url,param) {
    // var url = "/test/check";
    // var result
    $.ajax({
      type: "post",
      url: url,
//      data: "para="+para,  此处data可以为 a=1&b=2类型的字符串 或 json数据。
//       data: {"para":1},
      data: param,
      cache: false,
      async: false, ///使用同步的方式,true为异步方式
      dataType: "json",
      success: function (r, textStatus, jqXHR) {
        console.log(r)
        if (r) {
          model =  r;
        } else {
          model =  r;
        }
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("请求失败！"+textStatus);
      }
    });
  }




</script>

</html>